'use client'

import React, { useEffect, useRef, useState } from 'react'
import {
  Collapsible,
  CollapsibleTrigger,
  CollapsibleContent
} from '@radix-ui/react-collapsible'
import { Button } from './ui/button'
import { ChevronDown } from 'lucide-react'
import { StreamableValue, useStreamableValue } from 'ai/rsc'
import { motion, AnimatePresence, useInView } from 'framer-motion'
import { cn } from '@/lib/utils'
import { Separator } from './ui/separator'

interface CollapsibleMessageProps {
  message: {
    id: string
    isCollapsed?: StreamableValue<boolean>
    component: React.ReactNode
  }
  isLastMessage?: boolean
  index?: number
}

export const CollapsibleMessage: React.FC<CollapsibleMessageProps> = ({
  message,
  isLastMessage = false,
  index = 0
}) => {
  const [data] = useStreamableValue(message.isCollapsed)
  const isCollapsed = data ?? false

  // Always start closed so the staggered open animation can play
  const [open, setOpen] = useState(false)

  // Ref used to detect when this message scrolls into view
  const ref = useRef<HTMLDivElement>(null)
  const isInView = useInView(ref, { once: true, margin: '-60px' })

  useEffect(() => {
    if (isInView) {
      // Stagger: each message waits a little longer based on its position
      const timer = setTimeout(
        () => setOpen(true),
        index * 120          // 0 ms, 120 ms, 240 ms …
      )
      return () => clearTimeout(timer)
    }
  }, [isInView, index])

  // When the user manually toggles, respect that immediately
  const handleOpenChange = (value: boolean) => setOpen(value)

  // Non-collapsed messages (BotMessage, Section wrappers, etc.)
  // Animate in with a fade + slight upward slide as they enter the viewport
  if (!isCollapsed) {
    return (
      <motion.div
        ref={ref}
        initial={{ opacity: 0, y: 16 }}
        animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 16 }}
        transition={{ duration: 0.45, ease: 'easeOut', delay: index * 0.08 }}
      >
        {message.component}
      </motion.div>
    )
  }

  return (
    <div ref={ref}>
      <Collapsible open={open} onOpenChange={handleOpenChange}>
        <CollapsibleTrigger asChild>
          <div className="w-full flex justify-end">
            <Button
              variant="ghost"
              size={'icon'}
              className={cn('-mt-3 rounded-full')}
            >
              <ChevronDown
                size={14}
                className={cn(
                  open ? 'rotate-180' : 'rotate-0',
                  'h-4 w-4 transition-all'
                )}
              />
              <span className="sr-only">collapse</span>
            </Button>
          </div>
        </CollapsibleTrigger>

        {/* Remove initial={false} so the animation fires on first mount */}
        <AnimatePresence>
          {open && (
            <CollapsibleContent asChild forceMount>
              <motion.div
                initial={{ opacity: 0, height: 0 }}
                animate={{ opacity: 1, height: 'auto' }}
                exit={{ opacity: 0, height: 0 }}
                transition={{ duration: 0.35, ease: 'easeInOut' }}
                className="overflow-hidden"
              >
                {message.component}
              </motion.div>
            </CollapsibleContent>
          )}
        </AnimatePresence>

        {!open && <Separator className="my-2 bg-muted" />}
      </Collapsible>
    </div>
  )
}

return (
  <>
    {groupedMessagesArray.map(
      (
        groupedMessage: {
          id: string
          components: React.ReactNode[]
          isCollapsed?: StreamableValue<boolean>
        },
        index          // ← already available, just pass it down
      ) => (
        <CollapsibleMessage
          key={`${groupedMessage.id}`}
          message={{
            id: groupedMessage.id,
            component: groupedMessage.components.map((component, i) => (
              <div key={`${groupedMessage.id}-${i}`}>{component}</div>
            )),
            isCollapsed: groupedMessage.isCollapsed
          }}
          isLastMessage={
            groupedMessage.id === messages[messages.length - 1].id
          }
          index={index}   // ← add this
        />
      )
    )}
  </>
)